<template>
  <div class="dpzs">
    <!-- nav -->
    <div class="top_nav">
      <h2>视频裁判教学辅助系统</h2>
      <div class="nav">
        <ul class="left">
          <li>
            <router-link :to="{ name: 'Adinfo' }">
              <span>考勤信息</span>
            </router-link>
          </li>

          <li>
            <router-link :to="{ name: 'Monitor' }">
              <span>{{ $store.state.pxswitch ? "培训" : "考试" }}进程</span>
            </router-link>
          </li>
          <li>
            <router-link
              :to="{ name: $store.state.pxswitch ? 'Train' : 'Exama' }"
            >
              <span>业务管理</span>
            </router-link>
          </li>
        </ul>
        <ul class="right">
          <li>
            <router-link :to="{ name: 'systemlog' }">
              <span>系统日志</span>
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'information' }">
              <span>系统管理</span>
            </router-link>
          </li>
          <li>
            <router-link
              :to="{ name: $store.state.pxswitch ? 'TrainData' : 'Grade' }"
            >
              <span>{{ $store.state.pxswitch ? "培训" : "考试" }}数据</span>
            </router-link>
          </li>
        </ul>
        <keep-alive :include="['Monitor', 'Adinfo']">
          <router-view />
        </keep-alive>
      </div>
      <div class="time">
        <li class="times">
          <span class="bold">{{ times }}</span
          ><br />
          <span class="misize">{{
            new Date().toLocaleDateString() +
            " 星期" +
            week[new Date().getDay()]
          }}</span>
        </li>
        <li>
          <span class="bold">农历</span><br />
          <span class="misize">{{ nl }}</span>
        </li>
        <li>
          <button @click="fullScreen">
            {{ fulls ? "全屏" : "退出" }}
          </button>
        </li>
      </div>
    </div>
    <!-- 培训数据展示 -->
    <div v-show="$store.state.pxswitch" class="data_nav">
      <div class="data pxleft">
        <h4>培训累计</h4>
        <li>
          <p>累计参加人数</p>
          <h1>{{ grandTotalSignUp }}</h1>
          人
        </li>
        <li>
          <p>累计完成培训人数</p>
          <h1>{{ grandTotalEnd }}</h1>
          人
        </li>
        <li>
          <p>累计通过培训人数</p>
          <h1>{{ grandTotalPass }}</h1>
          人
        </li>
        <li>
          <p>培训平均用时</p>
          <h1>{{ averageTime }}</h1>
          分钟
        </li>
        <li>
          <p>培训通过率</p>
          <h1>{{ Math.round((grandTotalPass / grandTotalSignUp) * 100) }}</h1>
          %
        </li>
      </div>
      <div class="data pxright">
        <h4>本次培训</h4>
        <li>
          <p>完成人数</p>
          <h1>{{ startEnd }}</h1>
          人
        </li>
        <li>
          <p>平均时间</p>
          <h1>{{ startTime }}</h1>
          分钟
        </li>
      </div>
    </div>

    <!-- 考试数据展示 -->
    <div v-show="!$store.state.pxswitch" class="data_nav">
      <div class="data ksleft">
        <h4>考试累计</h4>
        <li>
          <p>累计参加人数</p>
          <h1>{{ grandTotalSignUp }}</h1>
          人
        </li>
        <li>
          <p>累计完成考试人数</p>
          <h1>{{ grandTotalEnd }}</h1>
          人
        </li>
        <li>
          <p>累计通过考试人数</p>
          <h1>{{ grandTotalPass }}</h1>
          人
        </li>
        <li>
          <p>考试通过率</p>
          <h1>{{ Math.round((grandTotalPass / grandTotalSignUp) * 100) }}</h1>
          %
        </li>
      </div>
      <div class="data ksright">
        <h4>本次考试</h4>
        <li>
          <p>应到人数</p>
          <h1>{{ shouldAttend }}</h1>
          人
        </li>
        <li>
          <p>实到人数</p>
          <h1>{{ actualNumber }}</h1>
          人
        </li>
        <li>
          <p>完成人数</p>
          <h1>{{ examsNumber }}</h1>
          人
        </li>
      </div>
    </div>

    <!-- conten 内容 -->
    <div class="conten">
      <!-- left -->
      <div class="cavs udwn">
        <div class="up">
          <h2>月度{{ $store.state.pxswitch ? "培训" : "考试" }}数据</h2>
          <div ref="cavas1" class="border-rt"></div>
        </div>
        <div class="down">
          <h2>课程占比分布</h2>
          <div ref="cavas2" class="border-rt"></div>
        </div>
      </div>
      <!-- center -->
      <div class="cavs center">
        <div class="up">
          <h2>实时视频</h2>
          <div class="border-rt">
            <video
              controls
              autoplay
              loop
              muted
              src="@/assets/images/2.mp4"
            ></video>
          </div>
        </div>
        <div class="down cdown">
          <h2>系统消息</h2>
          <el-table
            ref="tableRef"
            :data="inforData"
            :row-style="{ height: 0 + 'px' }"
            :cell-style="{ padding: '0px', paddingTop: '5px' }"
            height="22.9vh"
            :header-cell-style="tableHeaderColor"
            style="
              font-size: 0.9vw;
              border-top: 1px solid none;
              background: none;
              color: white;
            "
          >
            <el-table-column
              prop="equipmentName"
              label="机位号"
              width="150"
              show-overflow-tooltip
            ></el-table-column>

            <el-table-column prop="studentName" label="姓名"></el-table-column>

            <el-table-column
              prop="dateTime"
              label="时间"
              width="200"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="message" label="内容"> </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- right -->
      <div class="cavs udwn">
        <div class="up">
          <h2>年度{{ $store.state.pxswitch ? "培训" : "考试" }}数据对比</h2>
          <div ref="cavas3" class="border-rt"></div>
        </div>
        <div class="down">
          <h2>服务器资源</h2>
          <div ref="cavas4" class="border-rt progree">
            <li>
              <el-progress
                :stroke-width="10"
                type="circle"
                :color="colors"
                text-color="white"
                :percentage="percen1"
                :width="widthPro"
              >
              </el-progress>
              <br />
              <h4>CPU使用率</h4>
            </li>
            <li>
              <el-progress
                :color="colors"
                :stroke-width="10"
                type="circle"
                text-color="white"
                :percentage="percen2"
                :width="widthPro"
              >
              </el-progress>
              <br />
              <h4>内存占用率</h4>
            </li>
            <li>
              <el-progress
                :stroke-width="10"
                :color="colors"
                :width="widthPro"
                type="circle"
                text-color="white"
                :percentage="percen3"
              >
              </el-progress>
              <br />
              <h4>硬盘利用率</h4>
            </li>
            <div class="loading">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import {
  messageList,
  statuTraining,
  startTrain,
  statuExam,
  underExam,
  MonthData,
  YearData,
} from "@/api";

export default {
  name: "Index",
  data() {
    return {
      week: ["日", "一", "二", "三", "四", "五", "六"],
      times: "",
      nl: "",
      inforData: [], // 系统消息
      colors: [
        { color: "#f56c6c", percentage: 100 },
        { color: "#e6a23c", percentage: 80 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 40 },
        { color: "#6f7ad3", percentage: 20 },
      ],
      percen1: 52,
      percen2: 36,
      percen3: 45,
      fulls: true,
      grandTotalEnd: 0, // 累计完成人数
      grandTotalPass: 0, //累计通过人数
      grandTotalSignUp: 0, //累计参与人数
      averageTime: 0, // 平均用时
      startEnd: 0, //本次完成人数
      startTime: 0, // 本次平均用时
      shouldAttend: 0, // 应到人数
      actualNumber: 0, // 实到人数
      examsNumber: 0, // 完成人数
      monthSignData: [], // 月度参加人数
      monthPassData: [], // 月度通过人数
      yearSignData: [], // 年度参加人数
      yearPassData: [], // 年度通过人数
      year: new Date().getFullYear(), // 当前年份
      dateData: [
        "0",
        "初一",
        "初二",
        "初三",
        "初四",
        "初五",
        "初六",
        "初七",
        "初八",
        "初九",
        "初十",
        "十一",
        "十二",
        "十三",
        "十四",
        "十五",
        "十六",
        "十七",
        "十八",
        "十九",
        "二十",
        "廿一",
        "廿二",
        "廿三",
        "廿四",
        "廿五",
        "廿六",
        "廿七",
        "廿八",
        "廿九",
        "三十",
      ],
      monString: "正二三四五六七八九十冬腊",
      widthPro: 110,
    };
  },
  created() {
    setInterval(() => {
      this.times = new Date().toTimeString().substring(0, 8);
    }, 1000);
    console.log(
      this.monString,
      this.dateData,
      new Date()
        .toLocaleDateString("ja-JP-u-ca-chinese")
        .replace(
          /(\d+)\s*?年/,
          (_, y) =>
            "甲乙丙丁戊己庚辛壬癸".charAt((y - 4) % 10) +
            "子丑寅卯辰巳午未申酉戌亥".charAt((y - 4) % 12) +
            "年"
        )
        .replace(/(\d+)\s*?-/, (_, x) => this.monString.charAt(x - 1) + "月")
        .replace(/(\d+)\s*?-/, (_, x) => this.dateData[x])
    );
    this.$nextTick(() => {
      this.nl = new Date()
        .toLocaleDateString("ja-JP-u-ca-chinese")
        .replace(
          /(\d+)\s*?年/,
          (_, y) =>
            "甲乙丙丁戊己庚辛壬癸".charAt((y - 4) % 10) +
            "子丑寅卯辰巳午未申酉戌亥".charAt((y - 4) % 12) +
            "年"
        )
        .replace(/(\d+)\s*?/, (_, x) => this.monString.charAt(x - 1) + "月")
        .replace(/(\d+)\s*?/, (_, x) => this.dateData[x])
        .replace(/([-]?)/g, "");
    });

    // .replace(
    //   /(\d+)\s*?年/,
    //   (_, y) =>
    //     "甲乙丙丁戊己庚辛壬癸".charAt((y - 4) % 10) +
    //     "子丑寅卯辰巳午未申酉戌亥".charAt((y - 4) % 12) +
    //     "年")
    MonthData({ examType: this.$store.state.pxswitch ? 0 : 1 }).then((res) => {
      this.$store.state.pxswitch
        ? ((this.monthSignData = res.data.totalTrainModeSignUp),
          (this.monthPassData = res.data.totalTrainModePass))
        : ((this.monthSignData = res.data.totalExamSignUpInt),
          (this.monthPassData = res.data.totalExamPassInt));
      this.MonthlyData();
    });
    YearData({ examType: this.$store.state.pxswitch ? 0 : 1 }).then((res) => {
      this.$store.state.pxswitch
        ? ((this.yearSignData = res.data.totalTrainModeSignUp),
          (this.yearPassData = res.data.totalTrainModePass))
        : ((this.yearSignData = res.data.totalExamSignUpInt),
          (this.yearPassData = res.data.totalExamPassInt));
      this.annualData();
    });
    // 查询考试&培训 总人数信息
    this.$store.state.pxswitch
      ? (() => {
          this.queryStartTrain();
          statuTraining().then((res) => {
            this.grandTotalEnd = res.data.totalTrainModeEnd;
            this.grandTotalPass = res.data.totalTrainModePass;
            this.grandTotalSignUp = res.data.totalTrainModeSignUp;
            this.averageTime = res.data.totalTrainModeTime;
          });
        })()
      : (() => {
          this.queryStartExam();
          statuExam().then((res) => {
            this.grandTotalEnd = res.data.totalExamEnd;
            this.grandTotalPass = res.data.totalExamPass;
            this.grandTotalSignUp = res.data.totalExamSignUp;
          });
        })();

    this.widthPro = window.innerWidth / 13;
    // if (window.innerWidth < 1190) {
    //   this.widthPro = 100;
    // } else if (window.innerWidth > 1190 && window.innerWidth < 1390) {
    //   this.widthPro = 110;
    // }
  },
  beforeCreate() {},
  mounted() {
    this.ofCourseAccounted();

    this.queryMessageList();

    setInterval(() => {
      this.$store.state.pxswitch ? (() => {})() : (() => {})();
    }, 1000 * 60);

    setInterval(() => {
      this.percen1 = Math.floor(Math.random() * (93 - 45) + 45);
      this.percen2 = Math.floor(Math.random() * (78 - 15) + 35);
      this.percen3 = Math.floor(Math.random() * (70 - 45) + 45);
    }, 2500);
  },
  methods: {
    // 查询实时培训数据
    queryStartTrain() {
      startTrain({ userId: localStorage.getItem("usersId") }).then((res) => {
        this.startEnd = res.data.totalTrainModeEnd;
        this.startTime = res.data.totalTrainModeTime;
        setTimeout(() => {
          this.queryStartTrain();
        }, 1000 * 60);
      });
    },
    //查询考试实时数据
    queryStartExam() {
      underExam({ userId: localStorage.getItem("usersId") }).then((res) => {
        if (res.data) {
          this.shouldAttend = res.data.shouldAttend;
          this.actualNumber = res.data.actualNumber;
          this.examsNumber = res.data.examsNumber;
        }
        setTimeout(() => {
          this.queryStartExam();
        }, 1000 * 60);
      });
    },

    // 月度数据
    MonthlyData() {
      let Chart1 = echarts.getInstanceByDom(this.$refs.cavas1);
      if (Chart1 == null) {
        Chart1 = echarts.init(this.$refs.cavas1);
      }
      Chart1.setOption({
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "30px",
          left: "38",
          right: "18",
          bottom: "45",
        },
        legend: {
          data: ["参加人数", "通过人数"],
          textStyle: {
            color: "#fff8",
          },
          itemWidth: 15,
          itemGap: 18,
          itemJeight: 10,
          top: "5",
        },
        toolbox: {
          show: true,
          orient: "horizontal",
          feature: {
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
          itemSize: 12,
          itemGap: 16,
          calculable: true,
          iconStyle: {
            borderColor: "#fff",
            opacity: 0.5,
          },
          top: "2",
          right: 12,
        },
        xAxis: [
          {
            type: "category",
            // prettier-ignore
            // realtimeSort:true,
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            axisLabel: { color: "#fff8", rotate: 45 },
            axisLine: { show: false },
            axisTick: {
              show: true,
              alignWithLabel: true,
              lineStyle: { color: "#fff" },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: { color: "#fff8" },
            },
            splitLine: {
              lineStyle: {
                color: "#fff8",
              },
            },
          },
        ],
        series: [
          {
            name: "参加人数",
            type: "bar",
            barWidth: "32%",
            data: this.monthSignData,
          },
          {
            name: "通过人数",
            type: "bar",
            barWidth: "32%",
            barGap: 0,
            data: this.monthPassData,
          },
        ],
      });
    },
    // 课占比
    ofCourseAccounted() {
      let Chart2 = echarts.getInstanceByDom(this.$refs.cavas2);
      if (Chart2 == null) {
        Chart2 = echarts.init(this.$refs.cavas2);
      }
      Chart2.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)",
        },
        legend: {
          data: ["低压排故装置", "高低压柜", "用电采集装置", "带电调换电表"],
          textStyle: {
            color: "#ffffff95",
            fontSize: 12,
            align: "center",
          },
          itemWidth: 15,
          itemGap: 18,
          itemJeight: 10,
          bottom: "0",
          width: "100%",
          // backgroundColor:"rgb(128,128,128,.8)"
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["45%", "80%"],
            labelLine: {
              length: 30,
            },
            bottom: "10%",

            label: {
              formatter: "{b|{b}} \n {per|{d}%}  ",
              backgroundColor: "#F6F8FC25",
              borderColor: "#8C8D8E52",
              borderWidth: 1,
              borderRadius: 4,
              fontSize: 12,
              padding: [3, 4],
              rich: {
                a: {
                  color: "#fff",
                  lineHeight: 22,
                  align: "center",
                },
                hr: {
                  borderColor: "#eee",
                  width: "100%",
                  borderWidth: 1,
                  height: 0,
                },
                b: {
                  color: "#eee",
                  fontSize: 14,
                  fontWeight: "bold",
                  lineHeight: 33,
                },
                per: {
                  color: "#fff",
                  backgroundColor: "#297e73",
                  padding: [3, 4],
                  borderRadius: 4,
                  align: "center",
                },
              },
            },
            data: [
              {
                itemStyle: {
                  borderWidth: 1,
                  borderColor: "#fff",
                },
              },
              {
                value: 648,
                name: "带电调换电表",
                itemStyle: { borderColor: "#fff" },
              },
              {
                value: 335,
                name: "低压排故装置",
                itemStyle: { borderColor: "#fff" },
              },
              {
                value: 310,
                name: "用电采集装置",
                itemStyle: { borderColor: "#fff" },
              },
              {
                value: 251,
                name: "高低压柜",
                itemStyle: { borderColor: "#fff" },
              },
            ],
          },
        ],
      });
    },
    // 年度数据
    annualData() {
      let Chart3 = echarts.getInstanceByDom(this.$refs.cavas3);
      if (Chart3 == null) {
        Chart3 = echarts.init(this.$refs.cavas3);
      }
      Chart3.setOption({
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "30px",
          left: "45",
          right: "15",
          bottom: "45",
        },
        legend: {
          data: ["参加人数", "通过人数"],
          textStyle: {
            color: "#fff8",
          },
          itemWidth: 15,
          itemGap: 18,
          itemJeight: 10,
          bottom: "0",
        },
        toolbox: {
          show: true,
          orient: "horizontal",
          feature: {
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
          itemSize: 12,
          itemGap: 16,
          calculable: true,
          iconStyle: {
            borderColor: "#fff",
            opacity: 0.5,
          },
          top: "2",
          right: 12,
        },
        xAxis: [
          {
            type: "category",
            // prettier-ignore
            // realtimeSort:true,
            boundaryGap: false,
            data: [
              this.year - 4,
              this.year - 3,
              this.year - 2,
              this.year - 1,
              this.year,
            ],
            axisLabel: { color: "#fff8" },
            axisLine: { show: false },
            axisTick: {
              show: true,
              alignWithLabel: true,
              lineStyle: { color: "#fff" },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: { color: "#fff8" },
            },
            splitLine: {
              lineStyle: {
                color: "#fffa",
                type: "dashed",
              },
              show: true,
            },
            min: "dataMin",
            maxInterval: 200,
          },
        ],
        series: [
          {
            name: "参加人数",
            type: "line",
            symbolSize: 4,
            data: this.yearSignData,
          },
          {
            name: "通过人数",
            type: "line",
            color: ["#F9CA59"],
            symbolSize: 4,
            data: this.yearPassData,
          },
        ],
      });
    },
    // 全屏方法
    fullScreen() {
      if (this.fulls) {
        var element = document.documentElement;
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      }
      this.fulls = !this.fulls;
    },
    tableHeaderColor({ rowIndex }) {
      if (rowIndex === 0) {
        return "background-color: #009A9A50;color: #fff;font-weight: 500;'font-size':'14px';height:20px;padding:8px 0";
      }
    },
    // 获取滚动消息
    queryMessageList() {
      messageList({
        usersId: localStorage.getItem("usersId"),
        messageStatus: 0,
        page: 1,
        limit: 100,
      }).then((res) => {
        this.inforData = res.data;
        // 列表滚动
        this.$nextTick(() => {
          let divData = this.$refs.tableRef.bodyWrapper;
          setInterval(() => {
            // 元素自增距离顶部1像素
            divData.scrollTop += 2;
            // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
            if (
              divData.clientHeight + divData.scrollTop ==
              divData.scrollHeight
            ) {
              // 重置table距离顶部距离
              divData.scrollTop = 0;
            }
          }, 100);
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dpzs {
  width: 100%;
  height: 100vh;
  background: linear-gradient(52deg, #006d75, #00474f);
  color: white;
  box-sizing: border-box;
  padding: 1vh;
  .top_nav {
    width: 100%;
    position: relative;
    min-height: 6vw;
    background: url(../../assets/images/dptop.png) no-repeat;
    background-size: contain;
    h2 {
      font-size: 1.5vw;
      position: absolute;
      font-weight: 500;
      top: 1.1vw;
      left: 1.5vw;
      letter-spacing: 0.5vw;
    }
    .nav {
      position: absolute;
      top: 1.45vw;
      left: 23.2vw;
      width: 52.6vw;
      height: 2.19vw;
      line-height: 2.19vw;
      font-weight: 500;
      font-size: 1.1vw;
      letter-spacing: 0.2vw;
      box-sizing: border-box;
      %li-style {
        margin-right: 1vw;
        padding: 0.15vw 0.7vw;
        border: 0.1vw solid #00d6da;
      }
      .left {
        float: left;

        li {
          float: left;
          @extend %li-style;
          transform: skewX(-31deg);
          span {
            display: inline-block;
            transform: skewX(31deg);
          }
        }
      }
      .right {
        float: right;
        li {
          float: right;
          @extend %li-style;
          transform: skewX(31deg);
          span {
            display: inline-block;
            transform: skewX(-31deg);
          }
        }
      }
    }
    .time {
      position: absolute;
      top: 0.5vw;
      right: 0.3vw;
      width: 22vw;
      li {
        float: left;
        width: calc(100% / 3);
        font-size: 1.4vw;
        line-height: 1.55vw;
        .bold {
          font-weight: bold;
        }
        .misize {
          font-size: 0.8vw;
        }
        button {
          background: none;
          border: 1px solid #00d6da;
          color: white;
          font-size: 1vw;
          padding: 0.5vw 1vw;
          border-radius: 0.5vw;
          margin: 0.3vw;
        }
      }
    }
  }
  .data_nav {
    background: #12b3c338;
    margin-bottom: 1.5vh;

    &::after {
      content: "";
      display: block;
      clear: both;
    }

    .data {
      float: left;
      box-sizing: border-box;
      &:first-child {
        border-right: 1px solid #e3e3e340;
      }
      h4 {
        font-size: 2.2vh;
        text-align: center;
        border-bottom: 1px solid #e3e3e340;
        line-height: 3.2vh;
        padding: 0.2vw 0 0.3vw 0.5vw;
      }
      %data-li {
        float: left;
        box-sizing: border-box;
        border-right: 1px solid #e3e3e340;
        padding: 0.5vh 0;

        &:nth-child(6) {
          h1 {
            color: #fac858;
          }
        }
        &:nth-child(3) {
          h1 {
            color: #9cee76;
          }
        }
        &:nth-child(4) {
          h1 {
            color: #5fccf7;
          }
        }
        &:nth-child(2) {
          h1 {
            color: #dcdcff;
          }
        }
        &:nth-child(5) {
          h1 {
            color: #f77979;
          }
        }
        &:last-child {
          border: none;
        }
        p {
          line-height: 3vh;
        }
        h1 {
          display: inline-block;
          font-family: electronicFont;
          font-size: 3.2vw;
          line-height: 5.5vh;
        }
      }
      li {
        @extend %data-li;
        font-size: 1vw;
        line-height: 2.5vh;
      }
      &.pxleft {
        width: 70%;
        li {
          width: calc(100% / 5);
        }
      }
      &.pxright {
        width: 30%;
        li {
          width: calc(100% / 2);
        }
      }
      &.ksleft {
        width: 60%;
        li {
          width: calc(100% / 4);
        }
      }
      &.ksright {
        width: 40%;
        li {
          width: calc(100% / 3);
        }
      }
    }
  }
  .conten {
    &::after {
      content: "";
      display: block;
      clear: both;
    }
    h2 {
      text-align: left;
      font-size: 1.2vw;
      line-height: 2.3vw;
    }
    .cavs {
      float: left;
      box-sizing: border-box;
      margin-right: 2vw;
      &:last-child {
        margin: 0;
      }
      .border-rt {
        border: 0.2vh solid #eee5;
        position: relative;
        width: 100%;
        height: 29.4vh;
        border-radius: 0.3vw;
        margin-bottom: 1.2vh;
        &::before,
        &::after {
          position: absolute;
          width: 2vw;
          height: 2vw;
          content: "";
          z-index: 99;
        }
        &::before {
          top: -0.3vh;
          right: -0.3vh;
          border: {
            top: 0.2vw solid #00d6da;
            right: 0.2vw solid #00d6da;
          }
        }
        &::after {
          left: -0.3vh;
          bottom: -0.3vh;
          border: {
            left: 0.2vw solid #00d6da;
            bottom: 0.2vw solid #00d6da;
          }
        }
        video {
          width: 98%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          max-height: 95%;
        }
      }
      .cdown {
        height: 27.8vh;
        overflow: hidden;
      }
    }
    .udwn {
      width: calc(30% - 1vw);
    }
    .center {
      width: calc(40% - 2vw);
      .border-rt {
        width: 100%;
        height: 36vh;
      }
    }
  }

  .el-table--enable-row-hover::v-deep .el-table__body tr:hover > td {
    background: #fff1;
  }
  .progree {
    li {
      float: left;
      width: 33.33%;
      box-sizing: border-box;
      padding: 2vh 0.5vw;
    }
    h4 {
      line-height: 5vh;
      font-size: 1.1vw;
    }
    .loading {
      width: 100%;
      height: 3.5vh;
      margin: 0 auto;
      &::before {
        content: "";
        display: block;
        clear: both;
      }
      span {
        display: inline-block;
        width: 2vh;
        height: 2vh;
        margin-right: 2vw;
        border-radius: 50%;
        background: lightgreen;
        animation: load 1.04s ease infinite;

        @keyframes load {
          0% {
            opacity: 1;
          }
          100% {
            opacity: 0;
          }
        }
      }
    }
    .loading span:nth-child(1) {
      animation-delay: 1.13s;
    }
    .loading span:nth-child(2) {
      animation-delay: 1.26s;
    }
    .loading span:nth-child(3) {
      animation-delay: 1.39s;
    }
    .loading span:nth-child(4) {
      animation-delay: 1.52s;
    }
    .loading span:nth-child(5) {
      animation-delay: 1.65s;
    }
  }
}
</style>
